<template>
    <BFormTags class="tnxbsv-tags-input"
        v-model="model"
        :placeholder="placeholder"
        :separator="separator"
        :tag-variant="tagVariant || 'light'"
        add-button-text="+"
        :duplicate-tag-text="duplicateTagText"
        remove-on-delete
    />
</template>

<script>
import {BFormTags} from 'bootstrap-vue-next';

export default {
    name: 'TnxbsvTagsInput',
    components: {BFormTags},
    props: {
        modelValue: {
            type: Array,
            default: () => [],
        },
        placeholder: {
            type: String,
            default: '输入后回车以添加',
        },
        separator: {
            type: String,
            default: ','
        },
        tagVariant: String,
        duplicateTagText: {
            type: String,
            default: '标签重复',
        },
    },
    data() {
        return {
            model: this.modelValue,
        };
    },
    watch: {
        modelValue() {
            this.model = this.modelValue;
        },
        model() {
            this.$emit('update:modelValue', this.model);
        },
    },
    methods: {}
}
</script>

<style>
.tnxbsv-tags-input .b-form-tag + .b-from-tags-field > div {
    padding-left: 0.25rem;
}

.tnxbsv-tags-input .btn.b-form-tags-button {
    --bs-btn-padding-x: 0.5rem;
    margin-left: 0.5rem;
}
</style>
